<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <script src="./../plugins/svg.min.js"></script>
  <script src="./../plugins/svg.easing.min.js"></script>
  <script src="./../plugins/svg.filter.js"></script>
</head>
<body>
</body>
<script>
  /**
  * 参考 anime
  */
  var draw = SVG().addTo('body').size(800, 600)

  const points1 = "64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100";
  const points2 = "64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96";
  var polygon, filter, turbulence, displacementMap;
  function make() {
    const color = SVG.Color.random();
    polygon = draw.polygon(points1).attr({fill:color});
    filter = polygon.filterWith(function(add){
      turbulence = add.turbulence({
        baseFrequency:".05",
        numOctaves:"2"
      });

      const scale = "15";
      const xChannelSelector = "R";
      const yChannelSelector = "G";
      displacementMap = add.displacementMap("SourceGraphic", turbulence, scale, xChannelSelector, yChannelSelector);
    })
    polygon.move(400, 200);
  }

  make();
  const duration = 700
  turbulence.animate({duration,times:100,swing: true}).attr("baseFrequency", 0)
  displacementMap.animate({duration,times:100,swing: true}).attr("scale", 0)
  polygon.animate({duration,times:100,swing: true}).ease('sineInOut').plot(points2).move(400, 200)

</script>
</html>